<template>
    <div class="formcontainer">
        <BasicForm @register="register" />
        <div class="footer" style="margin-top: 20px; text-align: center;">
            <a-space :size="20">
                <a-button type="primary" @click="handleSetFormValue">调用表单写入</a-button>
                <a-button @click="resetFields">重置表单</a-button>
                <a-button type="primary" danger @click="formResetItem">重置表单单项</a-button>
                <a-button type="primary" @click="updateFormItem">更新表单项属性</a-button>
                <a-button type="primary" danger @click="formValidate">表单校验</a-button>
                <a-button @click="clearFormValidate">清除表单校验</a-button>
                <a-button type="primary" @click="getFormState">获取表单内容</a-button>
            </a-space>
        </div>
    </div>
</template>

<script setup lang="ts">
// 引用表单组件及配置文件
import { BasicForm, useForm } from '@/components/form/index';
import { schemas } from './useForm';

// 表单基础属性配置
const [register, { setFieldsValue, resetFields, needsResetFields, updateSchema, validateFields, clearValidate, getFieldsValue }] = useForm({
    labelWidth: 300, // 表单项字段名称宽度
    // 表单标签名称布局（vertical：标签与内容垂直摆放展示; horizontal：标签名称在内容左侧并排一行展示）
    layout: 'vertical',
    schemas: schemas, // 表单项配置
    // 设置全局字段规则校验触发事件
    // validateTrigger: 'blur',
});


const handleSetFormValue = () => {
    const formState = {
        name: '我是写入的内容',
        number: 3,
        selectValue: 1,
        selectMult: [2,3,5],
        checkbox: [1,2,3],
        treeSelect: 111,
        cascader: ['guangdong', 'guangzhou', 'tianhe'],
        year: '2023',
        month: '2023-11',
        time: '12:12:12',
        textarea: '这是段描述文字，请查看后验收。',
    };

    setFieldsValue(formState);
};

const formResetItem = () => needsResetFields(['name']);

const updateFormItem = () => {
    updateSchema([
        { field: 'defName', componentProps: { disabled: true }, rules: [{ required: false }] },
        { field: 'date', componentProps: { disabled: true }, rules: [{ required: true, type: 'string' }] },
        { field: '[beginDate, endDate]', componentProps: { disabled: true }, rules: [{ required: true, type: 'array' }] },
    ]);
};

const formValidate = async() => {
    try {
        const formState = await validateFields();
        console.log(formState);
        alert('表单填写内容：'+JSON.stringify(formState));
    }
    catch(err){
        console.error('校验失败：', err);
    }
};

const clearFormValidate = () => clearValidate();

const getFormState = () => {
    const formState = getFieldsValue();
    console.log(formState);
    alert('表单填写内容：'+JSON.stringify(formState));
};
</script>

<style lang="less" scoped>
.formcontainer {
    width: 1200px;
    margin: 0 auto;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    padding: 12px;
    padding-bottom: 100px;

    .footer {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 1200px;
        padding: 12px;
        background-color: #fff;
        box-shadow: 0px -3px 10px -1px rgba(0, 0, 0, .2);
    }
}
</style>